<template>
    <div id="AdminLayout">
        <el-container ref="AdminPage">
            <el-aside ref="AsideLayout" class="i-layout-aside i-scrollbar-hide">
                <div ref="LogoAsideLayout" class="i-logo-container">
                    <router-link to="/bar">
                        <img v-if="this.logo" :src="this.logo" class="i-logo">
                        <h1 class="i-logo-title">{{ title }} </h1>
                    </router-link>
                </div>
                <el-menu class="i-layout-menu-side i-scrollbar-hide" :default-active="this.activeMenu" :collapse="this.isCollapse">
                    <menu-tree :menus="this.menus"></menu-tree>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="i-layout-header" style="height: 90px">
                    <div class="i-layout-header-up">
                        <div class="i-layout-header-left">
                            <div class="i-layout-header-trigger" @click="collapseMenu">
                                <i :class="[isCollapse?'el-icon-s-unfold':'el-icon-s-fold']"></i>
                            </div>
                            <div class="i-layout-header-trigger">
                                <i class="el-icon-refresh-right" onclick="window.location.reload()"></i>
                            </div>
                        </div>
                        <div class="i-layout-header-middle">

                        </div>
                        <div class="i-layout-header-right">
                            <div class="i-layout-header-trigger">
                                <i class="el-icon-bell" onclick="window.location.reload()"></i>
                            </div>
                            <el-dropdown class="i-layout-header-trigger i-layout-header-user">
                                <span>王小虎</span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>个人中心</el-dropdown-item>
                                    <el-dropdown-item>设置</el-dropdown-item>
                                    <el-dropdown-item>退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="i-layout-header-tabs">
                        <el-tabs type="card" closable v-model="this.activeTabName" @contextmenu.native="this.tabCxtNative" @tab-click="this.tabClick" @tab-remove="this.tabRemove">
                            <el-tab-pane v-for="item in this.tabs" :key="item.key" :name="item.name" :label="item.label || '未命名'">
                            </el-tab-pane>
                            <!--<el-dropdown size="default" split-button @click="closeTab" @command="command => handleControlItemClick(command)">
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="left">
                                        关闭左侧
                                    </el-dropdown-item>
                                    <el-dropdown-item command="right">
                                        关闭右侧
                                    </el-dropdown-item>
                                    <el-dropdown-item command="other">
                                        关闭其它
                                    </el-dropdown-item>
                                    <el-dropdown-item command="all">
                                        全部关闭
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>-->
                        </el-tabs>
                    </div>
                </el-header>

                <el-main style="padding: 10px">
                    <keep-alive>
                        <component :is="this.activeTabName"></component>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>
    /*头边栏 样式*/
    .i-layout-header {
        height: 50px;
        background: #FFFFFF;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
        transition: all .2s ease-in-out;
        z-index: 3;
        display: block;
        text-align: right;
        padding: 0 0;
    }

    .i-layout-header-up {
        height: 50px;
        line-height: 50px;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    }

    .i-layout-header-left {
        float: left;
    }

    .i-layout-header-right {
        float: right;
    }

    .i-layout-header-trigger {
        height: 50px;
        font-size: 20px;
        padding: 0 5px;
        display: inline-block;
    }

    .i-layout-header-trigger:hover {
        background: #f8f8f9;
    }

    .i-layout-header-user {

    }

    .i-layout-aside {
        background-color: #191a23;
        max-width: 210px;
    }

    /*侧边栏logo样式*/
    .i-logo-container {
        position: relative;
        width: 210px;
        height: 50px;
        line-height: 50px;
        background: #191a23;
        text-align: center;
        overflow: hidden;
    }

    /*logo 图片 样式*/
    .i-logo {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        margin-right: 12px;
    }

    /*logo 文字 样式*/
    .i-logo-title {
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 14px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }

    /*侧边栏样式 滚动区样式*/
    .i-layout-menu-side:not(.el-menu--collapse) {
        min-height: calc(100% - 50px);
        width: 210px;
    }

    .i-scrollbar-hide {
        overflow-x: hidden;
    }

    .i-scrollbar-hide::-webkit-scrollbar {
        width: 0;
    }

    .i-scrollbar-hide::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .i-scrollbar-hide::-webkit-scrollbar-thumb {
        background: #e8eaec;
    }

</style>

<script>
    $.define("common/util.js",function (util) {
        return {
            name: 'admin',
            data() {
                return {
                    title: 'EasyVue',
                    logo: 'https://file.iviewui.com/pro-app-dist/img/logo-small.ca80454c.png',
                    isCollapse: false,
                    menus:[],
                    tabSeq:0,
                    tabKeyName:{},
                    activeMenu: "",
                    activeTabName: "",
                    tabs:[],
                    contextmenuFlag: false,
                    contentmenuX: 0,
                    contentmenuY: 0,
                    contextmenuList: [
                        { icon: 'arrow-left', title: '关闭左侧', value: 'left' },
                        { icon: 'arrow-right', title: '关闭右侧', value: 'right' },
                        { icon: 'times', title: '关闭其它', value: 'other' },
                        { icon: 'times-circle', title: '关闭全部', value: 'all' }
                    ]
                }
            },
            mounted() {
                let vm=this;
                $.menuClick=this.menuClick;
                vm.$refs.AdminPage.$el.style.height = document.documentElement.clientHeight + 'px';
                debugger;
                $.api.menuList().then(function (res) {
                    let ret = res.data;
                    if (ret.ok) {
                        vm.menus=util.listToTree(ret.data,"id","pid",1000);
                    } else {
                        layer.msg(ret.msg);
                    }
                });
                let menu={
                    id: 1003,
                    name: '热门搜索',
                    url: '/example/para'
                };
                this.menuClick(menu);
                this.activeMenu=menu.id+"";

            },
            methods: {
                collapseMenu() {
                    debugger;
                    this.isCollapse = !this.isCollapse;
                    if (this.isCollapse) {
                        this.$refs.AsideLayout.$el.style.width = '64px';
                        this.$refs.LogoAsideLayout.style.width = '64px';
                    } else {
                        this.$refs.AsideLayout.$el.style.width = '210px';
                        this.$refs.LogoAsideLayout.style.width = '210px';
                    }
                },

                menuClick (menu) {
                    debugger;
                    if(!menu.url){
                        return;
                    }
                    let key=menu.id+"";
                    let newTabName = this.tabKeyName[key];
                    if(undefined===newTabName){
                        newTabName = "tab"+(this.tabSeq++);
                        this.tabKeyName[key]=newTabName;
                        this.tabs.push({
                            key: key,
                            label: menu.name,
                            name: newTabName,
                            component: newTabName
                        });
                        this.$options.components[newTabName]=() => $.import(menu.url,true);
                    }

                    this.activeTabName = newTabName;
                },
                /**
                 * @description 右键菜单功能点击
                 */
                tabCxtNative(event) {
                    debugger;
                    /*let target = event.target;
                    let flag = false;
                    if (target.className.indexOf('el-tabs__item') > -1){
                        flag = true;
                    } else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
                        target = target.parentNode;
                        flag = true;
                    }
                    if (flag) {
                        event.preventDefault();
                        event.stopPropagation();
                        this.contentmenuX = event.clientX;
                        this.contentmenuY = event.clientY;
                        this.tagName = target.getAttribute('aria-controls').slice(5);
                        this.contextmenuFlag = true;
                    }*/
                },
                tabClick (tab, event) {
                    this.activeTabName = tab.name;
                },
                tabRemove(targetName){
                    debugger;
                    let vm=this;
                    let tabs = vm.tabs;
                    if(tabs.length===1){
                        return;
                    }

                    let activeName = vm.activeTabName;
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            delete vm.tabKeyName[tab.key];
                            delete vm.$options.components[targetName];
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                            return false;
                        }
                    });

                    vm.activeTabName = activeName;
                    vm.tabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            components: {
                'menu-tree': () => $.import('/layout/MenuTree'),
                'para': () => $.import('/example/para',true)
            }
        }
    });
</script>